<template>
	<div class="container">
		<el-page-header @back="goback" content="">
		</el-page-header>
		<el-form
		style="margin-top:20px;"
		    :model="ruleForm"
		    ref="ruleForm"
		    :rules="rules"
		    :label-position="labelPosition"
		    label-width="120px"
		    class="demo-ruleForm"
		>
		    <el-row>
				<el-col>
					<el-form-item label="养殖批号：" prop="breedBatch">
					    <el-input placeholder="请输入" v-model="ruleForm.breedBatch" disabled style="width: 300px"></el-input>
					</el-form-item>
				</el-col>
		        <el-col :span="12">
		            <el-form-item label="投入品类型：" prop="inputsType">
		                <template>
		                    <el-select
		                        v-model="ruleForm.inputsType"
								@change="chooseType"
		                        style="width:300px"
		                        placeholder="请选择">
		                        <el-option
		                            v-for="item in typeList"
		                            :key="item.label"
		                            :label="item.label"
		                            :value="item.label"
		                        ></el-option>
		                    </el-select>
		                </template>
		            </el-form-item>
					<el-form-item label="投入品批号：" prop="inputsBatch">
					    <template>
					        <el-select
					            v-model="ruleForm.inputsBatch"
								@change="getbatch"
								value-key="id"
					            style="width:300px"
					            placeholder="请选择"
					        >
					            <el-option
					                v-for="item in inputsBatchList"
					                :key="item.id"
					                :label="item.batch"
					                :value="item"
					            ></el-option>
					        </el-select>
					    </template>
					</el-form-item>
					<el-form-item label="喂养日期：" prop="feedTime">
					    <el-date-picker
					        v-model="ruleForm.feedTime"
					        type="date"
							@change="getdate"
					        value-format="yyyy-MM-dd"
					        placeholder="请选择"
					        style="width:300px"
					    ></el-date-picker>
					</el-form-item>
		        </el-col>
		        <el-col :span="10">
					<el-form-item label="品名" prop="inputsName">
					    <template>
					        <el-select
					            v-model="ruleForm.inputsName"
								@change="chooseInputsName"
					            style="width:300px"
								value-key="id"
					            placeholder="请选择">
					            <el-option
					                v-for="item in inputsNameList"
					                :key="item.id"
					                :label="item.inputsName"
					                :value="item"
					            ></el-option>
					        </el-select>
					    </template>
					</el-form-item>
					<el-form-item label="投入数量：" prop="useNumber">
					    <el-input
					        placeholder="请输入内容"
					        v-model="ruleForm.useNumber"
					        style="width:300px"
					    ></el-input>
						<span style="margin-left:10px;">{{units}}</span>
					</el-form-item>
					<el-form-item label="喂养负责人：" prop="type">
					    <template>
					        <el-select
					            v-model="principal"
								@change="choosePrincipal"
								value-key="id"
					            style="width:300px"
					            placeholder="请选择"
					        >
					            <el-option
					                v-for="item in userList"
					                :key="item.name"
					                :label="item.name"
					                :value="item"
					            ></el-option>
					        </el-select>
					    </template>
					</el-form-item>
		        </el-col>
		    </el-row>
			
		    <el-form-item class="footerFixed" label-width="0px">
		        <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
		        <el-button @click="goback">取消</el-button>
		    </el-form-item>
		</el-form>
	</div>
</template>

<script>
	import { feed_save,breedInputs_findByType,breedInputs_findByInputsName,breedInputs_findInputsByType } from '@/request/breedApi';
	import { user_findByAll } from '@/request/api';
	export default{
		data(){
			return{
				principal:"",
				labelPosition:'right',
				ruleForm:{
					"breedBatch":""
				},
				units:'',
				rules:{
					breedBatch: [{ required: true, message: '不能为空', trigger: 'change' }],
					inputsBatch: [{ required: true, message: '不能为空', trigger: 'change' }],
					feedTime: [{ required: true, message: '不能为空', trigger: 'change' }],
					inputsName: [{ required: true, message: '不能为空', trigger: 'change' }],
					useNumber: [{ required: true, message: '不能为空', trigger: 'change' }],
					inputsType: [{ required: true, message: '不能为空', trigger: 'change' }],
				},
				typeList:[
					{
				        value: '饲料添加剂',
				        label: '饲料添加剂'
				    },
				    {
				        value: '饲料',
				        label: '饲料'
				    },
					{
					    value: '药品',
					    label: '药品'
					},
				    {
				        value: '其他',
				        label: '其他'
				    }
				],
				inputsNameList:[],
				inputsBatchList:[],
				userList:[]
			}
		},
		mounted() {
			this.init();
			this.ruleForm.breedBatch = this.$route.query.batch;
		},
		methods:{
			getbatch(ele){
				this.ruleForm.inputsBatch = ele.batch
				this.units = ele.units
			},
			// 返回上一页
			goback(){
				this.$router.go(-1)
			},
			submitrule(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.ruleForm.breedId = this.$route.query.id;
						feed_save(this.ruleForm).then((res) => {
							if (res.code == 200) {
								this.$notify({
									title: '提示',
									message: '保存成功',
									type: 'success',
									duration:1000
								});
								this.goback()
							}
						});
					}else{
						return false
					}
				})
			},
			choosePrincipal(ele) {
				this.ruleForm.principalId = ele.id;
				this.ruleForm.principalName = ele.name;
			},
			init() {
				user_findByAll("").then((res) => {
					this.userList = res.data;
				});
			},
			chooseType() {
				breedInputs_findInputsByType({"type": this.ruleForm.inputsType}).then((res) => {
					this.inputsNameList = res.data;
				});
			},
			chooseInputsName(ele) {
				this.ruleForm.inputsName = ele.inputsName
				this.odate1 = ele.buyTime
				this.ruleForm.feedTime = ""
				breedInputs_findByInputsName({"inputsName": this.ruleForm.inputsName}).then((res) => {
					this.inputsBatchList = res.data;
				});
			},
			getdate(){
				var oDate1 = new Date(this.odate1)
				var oDate2 = new Date(this.ruleForm.feedTime)
				if(oDate1 > oDate2){
					this.$notify({
					    title: '提示',
					    message: '喂养日期不能早于购买日期',
					    type: 'info',
					    duration:1000
					});
					this.ruleForm.feedTime = ""
				}
			}
		}
	}
</script>

<style scoped>
	
</style>
